import * as React from "react";
import { useRouter } from "..";
/**
 * 匹配大布局
 * @param param0
 * @returns
 */
const useMatcher = ({ rules }: any) => {
  const { getRouterMatchItem, history } = useRouter();
  const [element, setElement] = React.useState(null);
  const prevRef = React.useRef(null);
  // React.useEffect(() => {
  //   matchElement()

  // }, [children])
  const matchElement = () => {
    const a = getRouterMatchItem(rules);
    if (prevRef.current == a.path) {
      return;
    }
    prevRef.current = a.path;

    if (a) {
      setElement(a.element);
    }
  };
  React.useEffect(() => {
    matchElement();
  }, [rules]);
  React.useEffect(() => {
    const unlisten = history.listen(() => {
      matchElement();
    });
    return () => {
      unlisten();
    };

  }, []);

  return {
    element,
  };
};
export default useMatcher;
